<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>用户管理</title>
  <link rel="stylesheet" href="${ctx}/static/admin/layui/css/layui.css">
  <link rel="stylesheet" href="${ctx}/static/admin/css/common.css">
  <link rel="stylesheet" href="${ctx}/static/admin/css/sidebar.css">
  <link rel="stylesheet" href="${ctx}/static/admin/css/switch.css">
</head>
  <body>
  	<div class="layui-card-body">
	  <#button permission="" iconCls="layui-btn" size="layui-btn-sm" textName="添加" id="add"/>
	  <button class="layui-btn layui-btn-sm" id="search_sidebar"><i class="layui-icon layui-icon-search"></i></button>
	    <table class="layui-hide" id="user_table"></table>
	</div>
  </body>
</html>
<script src="${ctx}/static/admin/layui/layui.js"></script>
<script src="${ctx}/static/admin/js/common.js"></script>
<script type="text/html" id="enabled">
  <input type="checkbox" name="status" lay-filter="status" value="{{d.status}}" lay-skin="switch" {{ d.id == 1 ? 'disabled' : '' }} lay-text="启用|禁用" {{ d.status == 1 ? 'checked' : '' }}>
</script>
<script type="text/html" id="toolbar">
  <#button permission="" iconCls="layui-btn-warm" size="layui-btn-xs" textName="编辑" event="edit"/>
  <#button permission="" iconCls="layui-btn-primary" size="layui-btn-xs" textName="重置密码" event="repwd"/>
  <#button permission="" iconCls="layui-btn-normal" size="layui-btn-xs" textName="分配角色" event="role"/>
  <#button permission="" iconCls="layui-btn-danger" size="layui-btn-xs" textName="删除" event="del" />
</script>
<script type="text/html" id="search_sidebar_tpl">
  <form class="layui-form">
    <div class="layui-form-item">
      <label class="layui-form-label">登陆名</label>
      <div class="layui-input-block">
        <input type="text" name="name" placeholder="请输入登陆名" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">姓名</label>
      <div class="layui-input-block">
        <input type="text" name="username" placeholder="请输入姓名" autocomplete="off" class="layui-input">
      </div>
    </div>
	<div class="layui-form-item">
      <label class="layui-form-label">状态</label>
      <div class="layui-input-block">
        <select name="status">
          <option value="">全部</option>
		  <option value="0">禁用</option>
		  <option value="1">启用</option>
        </select>
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-input-block">
        <button class="layui-btn" lay-submit lay-filter="serach_form"><i class="layui-icon">&#xe615;</i> 搜索</button>
        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
      </div>
    </div>
  </form>
</script>
<script type="text/javascript">
layui.use(['table','layer','jquery','element','sidebar','form','laytpl'], function(){
	var $ = jQuery = layui.$;
	var table = layui.table;
	var layer = layui.layer;
	var laytpl = layui.laytpl;
	var element = layui.element;
	var sidebar = layui.sidebar;
    var form = layui.form;
	var tableIns = table.render({
		elem: '#user_table',
	    cellMinWidth: 50,
	    size:'sm',
	    even:true,
	    url: '${ctx}/sys_admin/sys/user/getList',
	    height:'full-70',
	    page: true,
	    cols: [[
	      {type: 'numbers'},
	      {field: 'id', title: 'ID', width:50,hide:true},
	      {field: 'name', title: '登陆名', width: 120},
	      {field: 'username', title: '姓名', width: 120},
	      {field: 'phone', title: '电话', width: 120},
	      {field: 'email', title: '邮箱', width: 180},
	      {field: 'deptnames', title: '所属部门', width: 180},
	      {field: 'roleNames', title: '拥有角色', width: 180},
	      {field: 'des', title: '描述'},
	      {field: 'status', title:'状态', width: 100, templet: '#enabled', unresize: true},
	      {title: '操作', width: 260, fixed: 'right', align:'center',toolbar: '#toolbar'}
	    ]],
        page: {
            first: '首页',
            last: '尾页',
            prev: '上一页',
            next: '下一页',
            layout: ['limit', 'count', 'prev', 'next', 'page'] //自定义分页布局
        }
	});
	table.on('tool', function(obj){
	    var data = obj.data;
	    if(obj.event === 'edit'){
	    	parent.layer.open({
	  		  type: 2,
	  		  area: ['700px', '450px'],
	  		  fixed: false, //不固定
	  		  maxmin: true,
	  		  content: '${ctx}/sys_admin/sys/user/form?id='+data.id,
		  		btn: ['保存', '关闭'],
	  	  		yes: function(index, layero){
		  	  		var iframeWin = layero.find('iframe')[0];//得到iframe页的窗口对象，执行iframe页的方法：
			  		iframeWin.contentWindow.table = tableIns;
			  		layero.find('iframe').contents().find('#submit-btn').click();
			  	},
			  	btn2: function(index, layero){
		  			var index = layer.getFrameIndex(window.name);
					layer.close(index); //再执行关闭   
			  	}
	  		});
	    } else if(obj.event === 'repwd'){
	    	$.post("${ctx}/sys_admin/sys/user/forgetPwd", {id:data.id}, function(result){
				if (result.success) {
					parent.layer.open({
						skin: 'layui-layer-success', 
						title: '提示', 
						content: '<div style="padding: 20px 80px;">处理成功！</div>', 
						yes: function(index, layero){
							parent.layer.close(index);
						}
					});
				} else {
					parent.layer.open({
					  skin: 'layui-layer-error',
					  title: '提示',
					  content: '<div style="padding: 20px 80px;">'+result.msg+'</div>'
					});
				}
			},"json");
	    } else if(obj.event === 'role'){
	    	parent.layer.open({
		  		  type: 2,
		  		  area: ['300px', '450px'],
		  		  fixed: false, //不固定
		  		  maxmin: true,
		  		  content: '${ctx}/sys_admin/sys/user/useRole?id='+data.id,
			  		btn: ['保存', '关闭'],
		  	  		yes: function(index, layero){
			  	  		var iframeWin = layero.find('iframe')[0];//得到iframe页的窗口对象，执行iframe页的方法：
				  		iframeWin.contentWindow.table = tableIns;
				  		layero.find('iframe').contents().find('#submit-btn').click();
				  	},
				  	btn2: function(index, layero){
			  			var index = layer.getFrameIndex(window.name);
						layer.close(index); //再执行关闭   
				  	}
		  		});
	    }else if (obj.event === 'del') {
	        if(data.id==1){
                layer.msg("超级管理员禁止操作！");
                return ;
            }
            layer.confirm('确定删除行么？', function (index) {
                $.post('${ctx}/sys_admin/sys/user/delete', {"ids": data.id}, function (result) {
                    if (result.success) {
                        obj.del();
                        layer.close(index);
                    } else {
                        layer.msg(result.msg);
                    }
                }, 'json');
            });
        }
    });

	form.on('switch(status)', function(data){
		var selectIfKey = data.othis;
		var parentTr = selectIfKey.parents("tr");
		var parentTrIndex = parentTr.attr("data-index");
		var id = parentTr.find(('td:eq(1)')).text().trim();
		var visible = 0;
		if(data.elem.checked){visible = 1;}
		$.post('${ctx}/sys_admin/sys/user/visible', {id: id, visible: visible}, function() {}, 'json');
	}); 
	
	$("#add").on('click', function() {
		parent.layer.open({
			type: 2,
			area: ['700px', '450px'],
			fixed: false, //不固定
			maxmin: true,
			content: '${ctx}/sys_admin/sys/user/form',
	  		btn: ['保存', '重置', '关闭'],
		  	yes: function(index, layero){
		  		var iframeWin = layero.find('iframe')[0];//得到iframe页的窗口对象，执行iframe页的方法：
		  		iframeWin.contentWindow.table = tableIns;
		  		layero.find('iframe').contents().find('#submit-btn').click();
		  	},
		  	btn2: function(index, layero){
		  		layero.find('iframe').contents().find('#reset-btn').click();
		  		return false;
		  	},
		  	btn3: function(index, layero){
	  			var index = layer.getFrameIndex(window.name);
				layer.close(index); //再执行关闭   
		  	}
		});
	});

	$('#search_sidebar').on('click', function () {
		var that = this;
		sidebar.render({
	        elem: that,
	        content: $('#search_sidebar_tpl').html(),
	        title: '搜索',
	        shade: true,
	        width: '30%', //可以设置百分比和px
	        done: function () {
				form.render();
				form.on('submit(serach_form)', function (data) {
		            table.reload('user_table', {
                        method:'post',
                        page: {curr:1},
		            	where: {key:data.field},
			            page: {
						   curr : 1 //重新从第 1 页开始
						}
		            });
	            	return false;
	          	});
			}
		});
	});
});
</script>